<template>
  <!-- 管理员===> 垃圾分类审核页面 -->
  <view>
    <!-- 整个box -->
    <view class="box">
      <!-- 打卡信息 -->
      <view class="box2">
        <view style="font-size: large;font-weight: bold;color: #6A6A6A;">打卡信息</view>
        <view style="border-bottom: 2rpx solid #c1c1c0;">
          <view class="text">姓名：</view>
          <view class="input">{{ownerUser.name}}</view>
        </view>
        <view style="border-bottom: 2rpx solid #c1c1c0;">
          <view class="text">手机号：</view>
          <view class="input">{{ownerUser.tel}}</view>
        </view>
        <view style="border-bottom: 2rpx solid #c1c1c0;">
          <view class="text">打卡地址：</view>
          <view class="input">{{refuseClassification.address}}</view>
        </view>
        <view style="border-bottom: 2rpx solid #c1c1c0;">
          <view class="text">打卡时间：</view>
          <view class="input">{{refuseClassification.createTime}}</view>
        </view>
        <view>
          <view class="text">照片：</view>
          <view class="bxdata" style="display: flex;flex-wrap: wrap;">
            <view v-for="(item,index) in imgList" :key="index" @click="preview(index)" style="width: 48%;margin: 1%;">
              <!-- <view>{{item}}</view> -->
              <image :src="item" style="width: 100%;height: 200rpx;"></image>
            </view>
          </view>
        </view>
      </view>
      <view class="submit" @click="btnpass">通过</view>
      <view class="submit" @click="btnnopass" style="background-color:#E43D33;margin-top: 30rpx;">不通过</view>
    </view>
    <!-- 不通过弹出内容box  未通过原因  -->
    <view>
      <u-popup :show="noPassShow" :overlay="true" :closeOnClickOverlay="true" :closeable="true" :round="10"
        mode="center" @close="close" @open="open">
        <!-- 不通过弹出内容box -->
        <view style="width: 100%;" :style="{height: wh + 120 + 'px'}">
          <!-- 整个box -->
          <view class="box" style="margin-top: 150rpx;">
            <!-- 打卡信息 -->
            <view class="box2" style="width: 600rpx;">
              <view style="font-size: large;font-weight: bold;color: #6A6A6A;">不通过原因</view>
              <view style="border-bottom: 2rpx solid #c1c1c0;">
                <view class="text" style="width: 150rpx;">原因：</view>
                <u--textarea  v-model="reason" placeholder="请输入不通过原因" count maxlength="150"
                  autoHeight border="bottom"></u--textarea>
                <!-- <view class="input" >
                </view> -->
              </view>
            </view>
            <view @click="nopassSubmit" class="submit" style="background-color:#E43D33;margin-top: 200rpx;">提交</view>
          </view>
        </view>
      </u-popup>
    </view>
    <!-- 通过弹出内容box   填写获得积分   -->
    <view>
      <u-popup :show="passShow" :overlay="true" :closeOnClickOverlay="true" :closeable="true" :round="10" mode="center"
        @close="close" @open="open">
        <!-- 填写获得积分box -->
        <view style="width: 100%;" :style="{height: wh + 120 + 'px'}">
          <!-- 整个box -->
          <view class="box" style="margin-top: 150rpx;">
            <!-- 奖励积分信息 -->
            <view class="box2">
              <view style="font-size: large;font-weight: bold;color: #6A6A6A;">奖励积分信息</view>
              <view style="border-bottom: 2rpx solid #c1c1c0;" @click="showIntegralSelect = true;">
                <view class="text" style="width: 40%;">奖励积分：</view>
                <u--input v-model="jifen" disabled disabledColor="#ffffff" placeholder="请选择奖励积分" border="none">
                </u--input>
              </view>
            </view>
            <view @click="passSubmit" class="submit" style="background-color:#E43D33;margin-top: 200rpx;">提交</view>
            <u-action-sheet :show="showIntegralSelect" :actions="actions" title="请选择积分" 
              @close="showIntegralSelect = false" @select="integralSelect">
            </u-action-sheet>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        refuseClassification: {}, //打卡对象信息
        ownerUser: {}, //打卡的业主对象信息
        noPassShow: false,
        passShow: false,
        reason: '',
        jifen: 0,
        imgList: [],
        showIntegralSelect:false,
        actions: [{
            name: 2,
          },{
            name: 5,
          },{
            name: 10,
          },{
            name: 15,
          },{
            name: 20,
          },
        ],
      };
    },
    onLoad(option) {
      console.log(option.id);
      // 获取 垃圾分类打卡 数据
      this.getRefuseClass(option.id);
    },
    methods: {
      //积分值选择  事件
      integralSelect(e) {
        this.jifen = e.name;
        this.showIntegralSelect=false;
      },
      async getRefuseClass(id) {
        const {
          data: res
        } = await uni.$http.post('/refuseclassification/getrefuseclassificationlistbyid', id)
        if (res.status !== 200) return uni.$showMsg()
        if (res.data.length === 0) return uni.$showMsg()
        this.refuseClassification = res.data[0].refuseClassification;
        this.ownerUser = res.data[1].ownerUser;
        // 图片url处理
        var tempData = res.data[0].refuseClassification;
        var imgArr = tempData.img.split(";");
        for (var i = 0; i < imgArr.length - 1; i++) { //为了除去最后一个空的，所以是i<imgArr.length-1
          this.imgList[i] = imgArr[i];
        }
      },
      // 实现图片的预览效果
      preview(index) {
        // 调用 uni.previewImage() 方法预览图片
        uni.previewImage({
          // 从指定下标开始预览
          current: index,
          // 所有图片 url 地址的数组
          urls: this.imgList
        })
      },
      // 不通过按钮  单击事件
      btnnopass() {
        this.noPassShow = true;
      },
      // 通过按钮  单击事件
      btnpass() {
        this.passShow = true;
      },
      // 不通过弹框里面  的提交按钮  单击事件
      async nopassSubmit() {
        if (this.reason === '') return uni.$showMsg("原因不能为空")
        var updateRefuseClassification = this.refuseClassification;
        updateRefuseClassification.noPassReason = this.reason;
        updateRefuseClassification.status = '未通过';
        updateRefuseClassification.shenheTime=uni.$getDateTime(new Date());
        const {
          data: res
        } = await uni.$http.put('/refuseclassification/updaterefuseclassification', updateRefuseClassification)
        if (res.status !== 200) return uni.$showMsg()
        if (res.data.isok === false) {
          uni.$showMsg("服务器繁忙，提交失败，请重试~")
        } else {
          uni.$showMsg("审核成功")
          setTimeout(() => {
            uni.redirectTo({
              url: '/pages/admin-business/admin-business'
            })
          }, 1500)
        }
      },
      // 通过弹框里面  的提交按钮  单击事件
      async passSubmit() {
        if (this.jifen == 0) return uni.$showMsg("积分不能为0")
        var updateRefuseClassification = this.refuseClassification;
        updateRefuseClassification.value = this.jifen;
        updateRefuseClassification.status = '已通过';
        updateRefuseClassification.shenheTime=uni.$getDateTime(new Date());
        const {
          data: res
        } = await uni.$http.put('/refuseclassification/updaterefuseclassification', updateRefuseClassification)
        if (res.status !== 200) return uni.$showMsg()
        if (res.data.isok === false) {
          uni.$showMsg("服务器繁忙，提交失败，请重试~")
        } else {
          // 修改对应的业主的  总积分
          this.setOwnerUserSumValue(this.jifen); //原则上来说，应该设置一个数据库的事务，让审核通过和增加积分 同时成功  或同时失败
        }
      },
      async setOwnerUserSumValue(value) {
        var updateOwnerUser = this.ownerUser;
        var sum = Number(updateOwnerUser.sumValue) + Number(value);
        console.log(sum);
        updateOwnerUser.sumValue = sum;
        const {
          data: res
        } = await uni.$http.put('/user/updateuser', updateOwnerUser)
        if (res.status !== 200) return uni.$showMsg()
        if (res.data.isok === false) {
          uni.$showMsg("服务器繁忙，提交失败，请重试~")
        } else {
          uni.$showMsg("审核成功")
          setTimeout(() => {
            uni.redirectTo({
              url: '/pages/admin-business/admin-business'
            })
          }, 1500)
        }
      },
      // 底部弹出的新增，编辑   打开事件
      open() {
        // console.log('open');
      },
      // 底部弹出的新增，编辑   关闭事件
      close() {
        this.noPassShow = false;
        this.passShow = false;
      },
    }
  }
</script>

<style lang="scss">
  .box {
    padding: 30rpx;
  }

  .box1,
  .box2 {
    // border-radius: 30rpx;
    margin-bottom: 30rpx;
    padding: 25rpx;
    box-shadow: 0 0 15rpx #999999
  }

  .box1>view,
  .box2>view {
    padding: 10rpx;
    display: flex;
    margin-bottom: 10rpx;
    font-family: Microsoft YaHei;

    color: #333333;
  }

  .text {
    width: 30%;
    text-align: left;
    overflow: auto;
  }

  .bxdata {
    width: 60%;
  }


  .submit {
    background-color: #1599FD;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    border-radius: 15rpx;
    line-height: 100rpx;
    height: 100rpx;
  }
</style>
